<template>
  <view class="familyEdit flex flex-column align-center">
    <s-header-title ref="headerTitle" isDisplayBack title="家庭管理" is-fixed background="#f5f5f5"
                    @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <single-gap margin="25rpx 0 0 0" title="家庭名称" @elementClick="elementClick">
      <view class="familyEdit_familyName flex align-center justify-end">
        <view class="familyEdit_familyName_left mr_10">
          <text class="familyEdit_familyName_left_text">{{ familyInfo.name }}</text>
        </view>
        <text class="iconfont icon-ic_rightarrow fs_24 mr_11"></text>
      </view>
    </single-gap>
    <single-gap margin="25rpx 0 0 0" title="家庭号">
      <view class="familyEdit_familyName flex align-center justify-end">
        <view class="familyEdit_familyName_left mr_20">
          <text class="familyEdit_familyName_left_text">{{ familyInfo.family_id }}</text>
        </view>
        <view class="familyEdit_familyName_left mr_40 flex align-center justify-center" @click="setCilpText">
          <text class="familyEdit_familyName_left_text" style="color: #FF4206">复制</text>
          <image class="familyEdit_familyName_left_image ml_4" :src="`${IMG_URL}/index/replication.png`"></image>
        </view>
      </view>
    </single-gap>
    <single-gap margin="25rpx 0 0 0" title="家庭二维码" @elementClick="shareFamily">
      <view class="familyEdit_familyName flex align-center justify-end">
        <image class="familyEdit_familyName_code mr_10" :src="`${IMG_URL}/index/qrcode.png`"></image>
        <text class="iconfont icon-ic_rightarrow fs_24 mr_11"></text>
      </view>
    </single-gap>
    <single-gap margin="25rpx 0 0 0" title="家庭日志" @elementClick="goFamilyJournal">
      <view class="flex justify-end align-center">
        <text class="iconfont icon-ic_rightarrow fs_24 mr_11"></text>
      </view>
    </single-gap>
    <FamilyMembersList ref="membersList" margin="25rpx 0 0 0" title="发起人" :list="sponsorList" :permissionsIndex="3"
                       @seachClick="seachClick" @openRelationshipPopUp="openRelationshipPopUp"
                       :familyId="familyDetailParam.family_id"
                       :ownDetail="ownDetail" @classificationIsComplete="classificationIsComplete"></FamilyMembersList>
    <FamilyMembersList ref="membersList" margin="25rpx 0 0 0" title="联合发起人" :list="coSponsorsList"
                       :permissionsIndex="2"
                       :familyId="familyDetailParam.family_id" @openRelationshipPopUp="openRelationshipPopUp"
                       :ownDetail="ownDetail" @classificationIsComplete="classificationIsComplete"></FamilyMembersList>
    <FamilyMembersList ref="membersList" margin="25rpx 0 0 0" title="管理员" :list="administratorList"
                       :permissionsIndex="1"
                       :familyId="familyDetailParam.family_id" @openRelationshipPopUp="openRelationshipPopUp"
                       :ownDetail="ownDetail" @classificationIsComplete="classificationIsComplete"></FamilyMembersList>
    <FamilyMembersList ref="membersList" margin="25rpx 0 0 0" title="仅查看" :list="viewOnlyList" :permissionsIndex="1"
                       :familyId="familyDetailParam.family_id" @openRelationshipPopUp="openRelationshipPopUp"
                       :ownDetail="ownDetail" @classificationIsComplete="classificationIsComplete"></FamilyMembersList>
    <view class="hW_80"></view>
    <view class="familiesList_btn flex align-center justify-center" @click.stop="shareFamily">
      <text class="familiesList_btn_text">邀请亲友加入</text>
    </view>
    <view class="hW_50"></view>
    <view class="familyEdit_bottomBtn flex align-center justify-center mb_74" @click="deleteFamily">
      <text class="familyEdit_bottomBtn_text">{{ isShowDel ? '删除家庭' : '退出家庭' }}</text>
    </view>

    <first_popup ref="firstPopup" @closePopup="familyNameClose">
      <template #content>
        <view class="familyMemberPopUp_title mt_45">
          <view class="familyMemberPopUp_title_name">
            修改家庭名称
          </view>
        </view>
        <image class="familyMemberPopUp_icon z-1" :src="`${IMG_URL}passwoed_icon.png`"></image>
        <view class="familiesList_popupContent mt_91 flex align-center justify-center">
          <input type="text" v-model="familyName" placeholder="请填写家庭名称" style="text-align: center"
                 :focus="familyNameFocus"
                 placeholder-class="familiesList_popupContent_placeholder">
        </view>
      </template>
    </first_popup>
    <!--  设置称谓  -->
    <first_popup ref="relationshipPopup">
      <template #content>
        <scroll-view :scroll-y="true" class="relationshipPopup ">
          <view class="relationshipPopup_all justify-between mt_44">
            <view class="relationshipPopup_all_list flex align-center justify-center"
                  v-for="(item,index) in relationshipsList"
                  :key="index" :style="{
                    background:relationshipsIndex == index ? '#FF4206':'#E5E5E5'
                  }" @click="selectRelation(index)">
              <text class="relationshipPopup_all_list_text" :style="{
                color:relationshipsIndex == index ? '#FFFFFF' :item.sexFlag ? '#292929': '#FF4206'
              }">{{ item.name }}
              </text>
            </view>
          </view>
        </scroll-view>
      </template>
      <template v-slot:bottomContent>
        <view class="relationshipPopup_bottomContent flex align-center justify-center  mt_48 mb_120 mr_19">
          <input class="relationshipPopup_bottomContent_input" v-model="callValue" placeholder="自定义填写"
                 placeholder-class="relationshipPopup_bottomContent_placeholder" @input="callValueChange"></input>
        </view>
      </template>
    </first_popup>

    <!--    <third_popup ref="thirdPopup"></third_popup>-->
  </view>
</template>

<script>
  import HeaderTitle from '@/pages/familyPage/components/headerTitle.vue';
  import SingleGap from '@/pages/familyPage/components/singleGap.vue';
  import FamilyMembersList from '@/pages/familyPage/components/fmilyMembersList.vue';
  import First_popup from '@/pages/familyPage/components/first_popup.vue';
  import sheep from '@/sheep';

  export default {
    components: { First_popup, SingleGap, HeaderTitle, FamilyMembersList },
    data() {
      return {
        familyInfo: {},
        // 头部高度
        headerHeight: 0,
        info: {
          name: '',
          code: '',
        },
        // 发起人
        sponsorList: [],
        // 联合发起人
        coSponsorsList: [],
        // 管理员
        administratorList: [],
        // 仅查看
        viewOnlyList: [],
        familyName: '',
        familyDetailParam: {
          page: 1,
          pagesize: 10,
          total: 0,
          family_id: '',
        },
        // 当前登录者的信息
        ownDetail: {},
        familyNameFocus: false,
        relationshipsList: [],
        relationshipsIndex: 0,
        personalData: {},
        callValue: '',
        // 选中关系名称
        selectRelation(index) {
          this.callValue = '';
          this.relationshipsIndex = index;
        },
      };
    },
    computed: {
      isShowDel() {
        return this.familyInfo.is_my == 1;
      },
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    props: {
      options: {
        type: Object,
        default: () => {
        },
      },
    },
    async mounted() {
      await this.getRelationshipsList();
    },
    methods: {
      getPageHeight(number) {
        this.headerHeight = number;
      },
      // 获取家庭详情
      async getFamilyDetail() {
        const { data } = await sheep.$api.family.getFamilyCulture({
          family_id: this.options.family_id,
        });
        this.familyInfo = data;
        this.ownDetail = this.familyInfo;
        this.sponsorList = [{
          avatar: this.familyInfo.create_avatar,
          username: this.familyInfo.create_user_name,
          user_uid: this.familyInfo.create_uid,
          remark: this.familyInfo.create_remark,
          member_id: this.familyInfo.member_id,
          is_my: this.familyInfo.is_my == 1,
          full_list: this.familyInfo.full_list,
        }];
        this.coSponsorsList = this.familyInfo.roleList[0];
        this.administratorList = this.familyInfo.roleList[1];
        this.viewOnlyList = this.familyInfo.roleList[2];
        this.$nextTick(()=>{
          console.log('this.options=>',this.options);
          if (!!this.options.is_flag && this.options.is_flag != 'false') {
            this.shareFamily();
          }
        })
      },
      setCilpText() {
        uni.setClipboardData({
          data: `家庭名称：${this.familyInfo.name}
家庭号：${this.familyInfo.family_id}`,
          showToast: '复制成功',
        });
      },
      goFamilyJournal() {
        uni.setStorageSync('familyJournalName', JSON.stringify({
          name: this.familyInfo.name,
          id: this.familyInfo.family_id,
        }));
        sheep.$router.go('/pages/familyPage/familyJournal');
      },
      shareFamily() {
        console.log('this.familyInfo=>',this.familyInfo);
        uni.setStorageSync('setFamilyShare', JSON.stringify({
          family_id: this.options.family_id,
          code: this.options.code,
          // avatar: this.sponsorList[0].avatar,
          name: this.familyInfo.name,
        }));
        // sheep.$router.go('/pages/familyPage/familyQRCode', { family_id: this.options.family_id });
        uni.navigateTo({
          url:`/pages/familyPage/familyQRCode?family_id=${this.options.family_id}`,
        })
      },
      async elementClick() {
        const { code, msg } = await sheep.$api.family.checkAuth({
          family_id: this.options.family_id,
          action: 'add',
        });
        if (code != 1) {
          sheep.$helper.toast(msg);
          return;
        }
        this.familyName = this.info.name;
        uni.$once('setFamilyName', (name) => {
          this.familyInfo.name = name;
        });
        uni.setStorageSync('familyInfo', JSON.stringify(this.familyInfo));
        sheep.$router.go('/pages/familyPage/familyNameEdit');
      },
      openRelationshipPopUp(info) {
        console.log(info);
        this.$refs.relationshipPopup.openPopup({
          title: '设置称谓',
          maskClick: false,
          bottomContentWidth: '143rpx',
          confirm: async () => {
            const { code } = await sheep.$api.family.updateFamilyMemberInfo({
              member_id: info.member_id,
              remark: this.relationshipsIndex != -1 ? this.relationshipsList[this.relationshipsIndex].name : this.callValue,
            });
            uni.$emit('goEdit', this.relationshipsIndex != -1 ? this.relationshipsList[this.relationshipsIndex].name : this.callValue);
            this.callValue = '';
            await this.getFamilyDetail();
            this.$refs.relationshipPopup.closePopup();
          },
        });
      },
      async classificationIsComplete() {
        await this.getFamilyDetail();
      },
      // 获取关系列表
      async getRelationshipsList() {
        let { data } = await sheep.$api.family.getFamilyRemarksList();
        this.relationshipsList = data;
      },

      callValueChange() {
        this.relationshipsIndex = -1;
      },
      async deleteFamily() {
        const { code, msg } = await sheep.$api.family.deleteFamily({
          family_id: this.options.family_id,
        });
        sheep.$helper.toast(msg);
        if (code == 1) {
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      },
    },
  };
</script>

<style lang="scss">
  .familyEdit {
    /* #ifdef H5 */
    margin: auto;
    /* #endif */
    width: 750rpx;
    min-height: 100vh;
    background: #F5F5F5;

    .familyEdit_familyName {
      //width: 486rpx;

      .familyEdit_familyName_left {
        .familyEdit_familyName_left_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #9F9F9F;
        }

        .familyEdit_familyName_left_image {
          width: 38rpx;
          height: 38rpx;
        }
      }

      .familyEdit_familyName_image {
        width: 25rpx;
        height: 25rpx;
      }

      .familyEdit_familyName_code {
        width: 30rpx;
        height: 30rpx;
      }

      .familyEdit_familyName_share {
        width: 38rpx;
        height: 38rpx;
      }
    }

    .familyEdit_bottomBtn {
      width: 470rpx;
      height: 80rpx;
      background: #F5F5F5;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      border: 2rpx solid #A0A0A0;

      &_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #A0A0A0;
      }
    }

    .familiesList_popupContent {
      width: 484rpx;
      height: 80rpx;
      background: #FFFFFF;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      border: 2rpx solid #707070;

      .familiesList_popupContent_placeholder {
        font-weight: 500;
        font-size: 30rpx;
        color: #A0A0A0;
      }
    }

    .familyMemberPopUp_icon {
      width: 147rpx;
      height: 147rpx;
      position: absolute;
      top: 0;
      right: 0;
    }

    .familyMemberPopUp_title {
      width: 454rpx;

      .familyMemberPopUp_title_name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;

      }

      .familyMemberPopUp_title_detail {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #9F9F9F;
      }
    }
  }


  .relationshipPopup {
    width: 556rpx;
    max-height: 846rpx;

    .relationshipPopup_all {
      width: 556rpx;
      display: grid;
      grid-template-columns: repeat(3, 168rpx);
      grid-row-gap: 26rpx;

      .relationshipPopup_all_list {
        width: 168rpx;
        height: 63rpx;
        background: #E5E5E5;
        border-radius: 41rpx 41rpx 41rpx 41rpx;
      }
    }
  }

  .relationshipPopup_bottomContent {
    width: 393rpx;
    height: 80rpx;
    background: #FFFFFF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 1rpx solid #707070;

    .relationshipPopup_bottomContent_input {
      text-align: center;
    }

    .relationshipPopup_bottomContent_placeholder {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #A0A0A0;
    }
  }

  .familiesList_btn {
    width: 470rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 50rpx 50rpx 50rpx 50rpx;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
</style>
